<template>
    <div class="app">
         <ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in goodList">
                    <router-link v-bind='{to:"/goods/goodsshow/"+item.id}'>
                        <img class="mui-media-object" :src="item.img_url">
                        <h5 >{{item.title}}</h5>
                        <div class="desc">
                            <div>
                                <span style="float:left;font-size:14px;color:red;">￥2195</span>
                                <span style="margin-left:30px;text-decoration:line-through; ">￥2499</span>
                            </div>
                            <div>
                                <span style="float:left">热卖中</span>
                                <span style="float:right">剩60件</span>
                            </div>
                        </div>
                    </router-link>
                </li>
          </ul>    
    </div>
</template>
<script>
  //导入api的URL
    import common from '../../kits/common.js';
    export default{
        created(){
            this.getGoodList();
        },
        data(){
            return {
                goodList:[],
                pageindex:1
            }
        },
        methods:{
            getGoodList(){
                let url = common.apihost + '/api/getgoods?pageindex='+ this.pageindex;
                this.$http.get(url).then(res=>{
                    if(res.body.status!=0){
                        return alert(res.body.message);
                    }
                    this.goodList = res.body.message;
                })
            }
        }
    }
</script>
<style scoped>
.mui-table-view-cell > a:not(.mui-btn){
    display: inline;
}
    .mui-table-view.mui-grid-view{
        padding: 0px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell{
       border: 1px solid rgba(92,92,92,0.2);
        padding: 4px 2px 4px 4px;
        box-shadow: 0 0 4px rgba(92,92,92,0.2);
        
        box-sizing: border-box;
        overflow: hidden;
        margin-right:0px;
        font-size:12px;

    }
    .mui-table-view-cell > a:not(.mui-btn){
        white-space:normal;
        text-align: left;

    }
    .mui-grid-view h5{
        font-size:12px;
        margin-bottom: 20px;
    }
    .desc{
        width: 95%;  
        height:70px;
        padding-top: 10px;
        background-color: rgba(0,0,0,0.1);
        margin-left: 4px;
    }
    .desc > div{
        width: 100%;
        padding:0 10px;
        overflow: hidden;

    }
     .desc > div:nth-of-type(2){
        margin-top: 20px;
     }
</style>